<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>银行卡列表查询 - 管理后台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
        }
        .content-area {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 40px 0;
        }
        .card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
            padding: 40px 36px 32px 36px;
            max-width: 700px;
            width: 100%;
        }
        .section-title {
            font-size: 22px;
            color: #1a3a6c;
            margin-bottom: 28px;
            padding-bottom: 12px;
            border-bottom: 2px solid #1a3a6c;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .section-title i {
            color: #007bff;
            font-size: 22px;
        }
        .form-group {
            margin-bottom: 28px;
            display: flex;
            gap: 18px;
        }
        .form-group label {
            font-weight: 600;
            color: #444;
            font-size: 16px;
            margin-right: 8px;
        }
        .form-group input {
            padding: 10px 14px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            width: 120px;
            transition: all 0.3s;
        }
        .form-group input:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.08);
            outline: none;
        }
        .btn-primary {
            padding: 12px 28px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: #1a3a6c;
            color: #fff;
            transition: all 0.3s;
            box-shadow: 0 2px 8px rgba(26, 58, 108, 0.10);
        }
        .btn-primary:hover {
            background: #15315a;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(26, 58, 108, 0.18);
        }
        .table-area {
            margin-top: 24px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background: #f8f9fa;
            border-radius: 8px;
            overflow: hidden;
        }
        th, td {
            padding: 12px 10px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        th {
            background: #f0f4f9;
            color: #1a3a6c;
            font-weight: 600;
        }
        tr:last-child td {
            border-bottom: none;
        }
        .no-data {
            color: #888;
            text-align: center;
            padding: 30px 0;
        }
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 18px;
            margin-top: 18px;
        }
        .page-btn {
            background: #fff;
            border: 1px solid #1a3a6c;
            color: #1a3a6c;
            border-radius: 6px;
            padding: 8px 18px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .page-btn:disabled {
            color: #aaa;
            border-color: #eee;
            background: #f5f7fa;
            cursor: not-allowed;
        }
        .page-btn.active {
            background: #1a3a6c;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="content-area">
        <div class="card">
            <div class="section-title">
                <i class="fa fa-list"></i>银行卡列表查询
            </div>
            <div class="form-group">
                <label for="getlist-card-size">每页数量</label>
                <input id="getlist-card-size" type="number" value="10" min="1" max="50">
                <button class="btn-primary" onclick="fetchAndShowCardList()">
                    <i class="fa fa-search"></i>查询
                </button>
            </div>
            <div class="table-area" id="getlist-card-result"></div>
            <div class="pagination" id="pagination"></div>
        </div>
    </div>
    <script>
        let cardListCache = [];
        let currentPage = 1;
        let pageSize = 10;

        function fetchAndShowCardList() {
            pageSize = Math.max(1, Math.min(50, parseInt(document.getElementById('getlist-card-size').value) || 10));
            fetch('http://localhost:8080/admin/card/getList?nums=0&size=50')
                .then(r => r.json())
                .then(d => {
                    if (d.code === '200' && d.data && d.data.records) {
                        cardListCache = d.data.records;
                        localStorage.setItem('admin_card_list_cache', JSON.stringify(cardListCache));
                        showCardTable(1);
                    } else {
                        cardListCache = [];
                        localStorage.removeItem('admin_card_list_cache');
                        showCardTable(1);
                    }
                })
                .catch(e => {
                    cardListCache = [];
                    localStorage.removeItem('admin_card_list_cache');
                    showCardTable(1);
                });
        }

        function showCardTable(page) {
            if (!cardListCache || cardListCache.length === 0) {
                document.getElementById('getlist-card-result').innerHTML = '<div class="no-data">未查询到数据</div>';
                document.getElementById('pagination').innerHTML = '';
                return;
            }
            currentPage = Math.max(1, page || 1);
            const total = cardListCache.length;
            const totalPages = Math.ceil(total / pageSize);
            if (currentPage > totalPages) currentPage = totalPages;
            const start = (currentPage - 1) * pageSize;
            const end = Math.min(start + pageSize, total);
            let html = '<table><tr><th>银行卡号</th><th>余额</th></tr>';
            for (let i = start; i < end; i++) {
                const c = cardListCache[i];
                html += `<tr><td>${c.cardId || c.cardID || ''}</td><td>${c.balance || ''}</td></tr>`;
            }
            html += '</table>';
            document.getElementById('getlist-card-result').innerHTML = html;
            // 分页
            let pagHtml = `<button class='page-btn' onclick='showCardTable(${currentPage - 1})' ${currentPage <= 1 ? 'disabled' : ''}><i class='fa fa-angle-left'></i> 上一页</button>`;
            pagHtml += `<span>第 ${currentPage} / ${totalPages} 页</span>`;
            pagHtml += `<input id='jumpPageInput' type='number' min='1' max='${totalPages}' value='${currentPage}' style='width:50px;margin:0 8px;'>`;
            pagHtml += `<button class='page-btn' onclick='jumpToPage(${totalPages})'>跳转</button>`;
            pagHtml += `<button class='page-btn' onclick='showCardTable(${currentPage + 1})' ${currentPage >= totalPages ? 'disabled' : ''}>下一页 <i class='fa fa-angle-right'></i></button>`;
            document.getElementById('pagination').innerHTML = pagHtml;
        }

        function jumpToPage(totalPages) {
            let val = parseInt(document.getElementById('jumpPageInput').value);
            if (isNaN(val) || val < 1) val = 1;
            if (val > totalPages) val = totalPages;
            showCardTable(val);
        }

        // 页面关闭时清除缓存
        window.addEventListener('beforeunload', function () {
            localStorage.removeItem('admin_card_list_cache');
        });

        // 页面加载时自动加载缓存或拉取
        window.onload = function () {
            const cache = localStorage.getItem('admin_card_list_cache');
            if (cache) {
                cardListCache = JSON.parse(cache);
                showCardTable(1);
            } else {
                fetchAndShowCardList();
            }
        };
    </script>
</body>
</html>